<template>
  <a-list
    item-layout="vertical"
    :grid="{ gutter: 13, md:3 }"
    size="large"
    :pagination="pagination"
    :data-source="listData"
  >
    <a-list-item slot="renderItem" key="item.title" slot-scope="item">
      <a-card hoverable>
        <img slot="cover" alt="example" :src="item.imgsrc" />
        <a :href="item.url"
          ><h2>{{ item.title }}</h2></a
        >
        <p>
          <a-tag color="cyan">
            {{ item.explain }}
          </a-tag>
        </p>
      </a-card>
    </a-list-item>
  </a-list>
</template>

<script>
import axios from "axios";
const listData = [];

export default {
  data() {
    return {
      listData,
      pagination: {
        pageSize: 8,
      },
    };
  },
  created: function() {
    this.getList();
  },
  methods: {
    getList: function() {

      var that = this;

      axios
        .get("http://api.tianapi.com/txapi/rumour/index", {
          params: {
            key: "02740fcb753b35eff80e7fa788b5818d",
            num: 20,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then(function(response) {
          that.listData = response.data["newslist"];

        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
};
</script>

<style>
.ant-card-cover img {
  height: 250px;
  object-fit: cover;
}
</style>